<template>
  <div class="product-editor">
    <el-tabs>
      <el-tab-pane label="基本信息">
        <div class="form-section">
          <h3>产品名称</h3>
          <el-input v-model="modelValue.product_name" placeholder="输入产品名称" />
        </div>
        
        <div class="form-section">
          <div class="price-inputs">
            <div class="price-input">
              <h3>价格</h3>
              <el-input-number v-model="modelValue.price" :min="0" :precision="2" />
            </div>
            
            <div class="price-input">
              <h3>原价</h3>
              <el-input-number v-model="modelValue.original_price" :min="0" :precision="2" />
            </div>
          </div>
        </div>
        
        <div class="form-section">
          <h3>产品简介</h3>
          <el-input
            v-model="modelValue.brief"
            type="textarea"
            :rows="3"
            placeholder="输入产品简介"
          />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="产品图库">
        <div class="form-section">
          <h3>产品图片</h3>
          <el-upload
            class="gallery-uploader"
            action="#"
            :http-request="uploadGalleryImage"
            list-type="picture-card"
            :file-list="galleryFileList"
            :on-remove="removeGalleryImage"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="详细描述">
        <div class="form-section">
          <h3>产品详情</h3>
          <el-input
            v-model="modelValue.description"
            type="textarea"
            :rows="15"
            placeholder="输入产品详情"
          />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="规格参数">
        <div class="form-section">
          <h3>产品特点</h3>
          <div v-for="(feature, index) in modelValue.features" :key="index" class="feature-item">
            <el-input v-model="modelValue.features[index]" placeholder="输入产品特点">
              <template #append>
                <el-button @click="removeFeature(index)" icon="Delete" />
              </template>
            </el-input>
          </div>
          <el-button @click="addFeature" size="small" style="margin-top: 10px;">
            添加特点
          </el-button>
        </div>
        
        <div class="form-section">
          <h3>规格参数</h3>
          <div v-for="(spec, index) in modelValue.specifications" :key="index" class="spec-item">
            <el-input v-model="modelValue.specifications[index].name" placeholder="参数名称" style="width: 40%;" />
            <el-input v-model="modelValue.specifications[index].value" placeholder="参数值" style="width: 40%;" />
            <el-button @click="removeSpec(index)" icon="Delete" />
          </div>
          <el-button @click="addSpec" size="small" style="margin-top: 10px;">
            添加规格
          </el-button>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="SEO设置">
        <div class="form-group">
          <label>SEO标题</label>
          <el-input v-model="modelValue.meta_title" placeholder="SEO标题" />
        </div>
        
        <div class="form-group">
          <label>SEO描述</label>
          <el-input
            v-model="modelValue.meta_description"
            type="textarea"
            :rows="3"
            placeholder="SEO描述"
          />
        </div>
        
        <div class="form-group">
          <label>SEO关键词</label>
          <el-input v-model="modelValue.meta_keywords" placeholder="关键词，用逗号分隔" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const galleryFileList = ref<any[]>([])

// 初始化文件列表
watch(() => props.modelValue.gallery, (newGallery) => {
  if (newGallery && newGallery.length > 0) {
    galleryFileList.value = newGallery.map((url: string, index: number) => ({
      name: `image-${index}`,
      url
    }))
  }
}, { immediate: true })

// 上传产品图库图片
const uploadGalleryImage = (options: any) => {
  const file = options.file
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    if (!props.modelValue.gallery) {
      const newValue = { 
        ...props.modelValue, 
        gallery: [reader.result]
      }
      emit('update:modelValue', newValue)
    } else {
      const newGallery = [...props.modelValue.gallery, reader.result]
      const newValue = { 
        ...props.modelValue, 
        gallery: newGallery 
      }
      emit('update:modelValue', newValue)
    }
    
    galleryFileList.value.push({
      name: file.name,
      url: reader.result
    })
  }
}

// 移除产品图库图片
const removeGalleryImage = (file: any) => {
  const index = galleryFileList.value.findIndex(item => item.url === file.url)
  if (index !== -1) {
    galleryFileList.value.splice(index, 1)
    const newGallery = [...props.modelValue.gallery]
    newGallery.splice(index, 1)
    const newValue = { ...props.modelValue, gallery: newGallery }
    emit('update:modelValue', newValue)
  }
}

// 添加产品特点
const addFeature = () => {
  const newFeatures = [...props.modelValue.features, '']
  const newValue = { ...props.modelValue, features: newFeatures }
  emit('update:modelValue', newValue)
}

// 移除产品特点
const removeFeature = (index: number) => {
  const newFeatures = [...props.modelValue.features]
  newFeatures.splice(index, 1)
  const newValue = { ...props.modelValue, features: newFeatures }
  emit('update:modelValue', newValue)
}

// 添加规格参数
const addSpec = () => {
  const newSpecs = [...props.modelValue.specifications, { name: '', value: '' }]
  const newValue = { ...props.modelValue, specifications: newSpecs }
  emit('update:modelValue', newValue)
}

// 移除规格参数
const removeSpec = (index: number) => {
  const newSpecs = [...props.modelValue.specifications]
  newSpecs.splice(index, 1)
  const newValue = { ...props.modelValue, specifications: newSpecs }
  emit('update:modelValue', newValue)
}
</script>

<style scoped>
.form-section {
  margin-bottom: 20px;
}

.form-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.price-inputs {
  display: flex;
  gap: 20px;
}

.price-input {
  flex: 1;
}

.feature-item, .spec-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gallery-uploader :deep(.el-upload--picture-card) {
  width: 120px;
  height: 120px;
  line-height: 120px;
}

.gallery-uploader :deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 120px;
  height: 120px;
}
</style> 